09 Exos HTTP et Formulaire Web

Exercice 1 - requêtes pour une page simple⚓︎

A l'aide du navigateur Firefox, ouvrez la page http://info.csilyon.fr/web/page-simple.html.
Appuyez sur la touche [F12] puis sélectionnez l'onglet [↑↓Réseau].
Rechargez éventuellement la page en cliquant sur l'icône d'actualisation de Firefox.
Combien de requêtes HTTP semblent avoir eu lieu ?
Comment interprétez-vous le code 200 dans la colonne [État] ?
Ce code fait-il partie de la requête HTTP envoyée par le navigateur ?
Comment interprétez-vous le code 404 dans la colonne [État] ?
Cliquer sur les détails des en-têtes.
Connaît-on l'adresse IP du serveur web ? Et le port ?
Quelles informations sur le navigateur sont transmises au serveur dans l'en-tête de la requête ?
Quelles informations sur le serveur sont transmises au client dans l'en-tête de la réponse ?

Exercice 2 - requêtes pour une page moins basique⚓︎

Ouvrez Firefox ainsi que la console (touche [F12]) pour analyser les requêtes Réseau.

Ouvrez la page http://info.csilyon.fr/web/page-image.html.
Combien de requêtes HTTP ont eu lieu ?
Le type de contenu d'un fichier envoyé par le serveur est-il présent dans la réponse HTTP du serveur ?
Peut-on connaître le poids en octets de l'image uniquement en consultant la réponse HTTP ?

Remarque

Chaque lien présent sur la page implique une nouvelle requête, ce qui mener à un grand nombre d'aller-retours entre le navigateur et le serveur.

Combien de requêtes HTTP ont lieu pour obtenir la page d'accueil du lycée ?

Exercice 3 - passage de paramètres dans une URL⚓︎

Ouvrir un navigateur Web.

Demander la page d'adresse http://info.csilyon.fr/web/accueil.php. Quel est l'affichage obtenu ?
Demander la page d'adresse http://info.csilyon.fr/web/accueil.php?nom=Turing&prenom=Alan
Quel est l'affichage obtenu ?
Ouvrir les outils de développement avec F12 puis sélectionner les onglets Réseau et Paramètres.
La partie ?nom=Turing&prenom=Alan de l'URL est une chaîne de requête, elle commence par le symbole ? puis contient une liste de paires nom=valeur séparées par un symbole esperluette &. Ces paramètres ne font pas partie de l'adresse de la ressource mais sont une façon pour le client de transmettre des informations au serveur.
Suivant le navigateur, dans les outils de développement, on peut voir les paramètres ou non...
Remplacer Turing par votre nom et Alan par votre prénom dans l'URL précédente. Que peut-on remarquer ? À votre avis, que se passe-t-il sur le serveur lorsqu'il reçoit la requête HTTP ?

Voici le contenu du fichier accueil.php sur le serveur. S'agit-il d'un texte écrit en HTML ? Faire une recherche sur la signification de l'acronyme PHP.

PHP

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Accueil </title>
    <meta charset="utf-8">    
  </head> 
  <body>
    <h1>
      <?php  
        echo "Bienvenue " . $_GET['prenom'] . " " .  $_GET['nom'] ;
      ?>
    </h1>
  </body>
</html>

Enregistrer l'URL testée précédemment (avec la chaîne de requête) dans les marque-pages du navigateur. Ouvrir un autre onglet et cliquer sur le signet enregistré. Retrouve-t-on la même page Web ?

Exercice 4 - Formulaire et passage de paramètres avec la méthode GET⚓︎

Ouvrir avec un navigateur Web la page d'URL http://info.csilyon.fr/web/formulaire-get.html

Cliquer sur le bouton Envoyer. Que se passe-t-il ? Rafraîchir la page avec F5. Que se passe-t-il ?
Changer les valeurs des champs Prénom et Nom du formulaire puis cliquer sur le bouton Envoyer. Que se passe-t-il ?
Ouvrir la fenêtre des outils de développement et afficher dans l'onglet Réseau l'entête de la requête HTTP.
Sélectionner l'onglet Paramètres et vérifier si vous obtenez les paramètres transmis à travers l'URL dans la chaîne de requête comme dans l'exercice 3 (cela dépend du navigateur).

Afficher le code source de la page formulaire-get.html avec le raccourci clavier CRTL + U. On devrait obtenir le texte ci-dessous :

HTML

<!DOCTYPE html>

<html lang="fr">

<head>
  <title>Formulaire HTML </title>
  <meta charset="utf-8">    
</head>

<body>

    <form action="accueil.php" method="GET">

        <label for="id_prenom">Prénom :</label>
        <input type="text" id="id_prenom" name="prenom" value="Alan">

        <label for="id_nom">Nom :</label>
        <input type="text" id="id_nom" name="nom" value="Turing">

        <button type="submit" id="bouton">Envoyer</button>

    </form>


</body>
</html>

Exercice 5 - Formulaire et passage de paramètres avec la méthode POST⚓︎

Ouvrir avec un navigateur Web la page d'URL http://info.csilyon.fr/web/formulaire-post.html.

Afficher le code source de la page formulaire-post.html avec le raccourci clavier CRTL + U. Quels sont les deux changements par rapport au code de formulaire-get.html ?

HTML

<!DOCTYPE html>

<html lang="fr">

<head>
  <title>Formulaire HTML </title>
  <meta charset="utf-8">    
</head>

<body>

    <form action="accueil-post.php" method="POST">

        <label for="id_prenom">Prénom :</label>
        <input type="text" id="id_prenom" name="prenom" value="Alan">

        <label for="id_nom">Nom :</label>
        <input type="text" id="id_nom" name="nom" value="Turing">

        <button type="submit" id="bouton">Envoyer</button>

    </form>


</body>
</html>

Retourner sur le formulaire (prérempli avec "Alan" et "Turing"), et cliquer sur le bouton Envoyer. Que se passe-t-il ?
Changer les valeurs des champs Prénom et Nom du formulaire puis cliquer sur le bouton Envoyer. Que se passe-t-il ? Observe-t-on un changement dans l'URL de la requête ? dans son entête ?
Rafraîchir la page avec F5. Que se passe-t-il ?
Ouvrir la fenêtre des outils de développement et afficher dans l'onglet Réseau l'entête de la requête HTTP.
Sélectionner l'onglet Paramètres (ou Requête) et vérifier qu'on retrouve les paramètres du formulaire. Quelle différence par rapport à la méthode vue dans l'exercice 3 ?
Quels avantages et inconvénients voyez-vous pour envoyer des paramètres au serveur avec chacune de ces deux méthodes GET et POST ?